<template>
  <header>
    <h2>职工在线后台管理系统</h2>
    <div class="user">
      <el-image style="width: 40px; height: 40px; border-radius: 20px" :src="userInfo.avatar" :preview-src-list="srcList"></el-image>
      <div class="info">
        <div>欢迎</div>
        <div class="name">{{ userInfo.name }}</div>
      </div>
      <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link"> <i class="el-icon-caret-bottom"></i> </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="logout">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </header>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'index',
  data() {
    return {
      srcList: [this.$store.state.userInfo.avatar],
    }
  },
  computed: {
    ...mapState(['userInfo']),
  },
  methods: {
    handleCommand(command) {
      if (command === 'logout') {
        this.$confirm('即将退出登录，是否确定？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            localStorage.removeItem('token')
            this.$store.commit('initUserInfo', {})
            this.$router.replace('/login')
            this.$message({
              type: 'success',
              message: '已退出!',
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '取消退出',
            })
          })
      }
    },
  },
}
</script>

<style lang="less" scoped>
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 70px;
  background-color: #666;
  h2 {
    color: #fff;
    padding-left: 30px;
  }
  .user {
    display: flex;
    align-items: center;
    color: #fff;
    padding-right: 50px;
    .info {
      margin-left: 10px;
    }
    i {
      margin-left: 20px;
      font-size: 20px;
      color: #fff;
    }
  }
}
</style>
